<template>
  <SideLayout sideTitle="文件云盘"
              sideFixed
              collapsible
              :collapsed="collapsed"
              @sider-collapse="handleSideToggle">
    <template #top>
      <FuncTitle @click="handleTypeChange({ key: 'all' })"
                 prefix="CloudServerOutlined"
                 :title="collapsed ? '' : '文件云盘'"></FuncTitle>
    </template>
    <template #sider>
      <a-menu :theme="contentTheme" @click="handleTypeChange" v-model:selectedKeys="selectedTypes">
        <a-menu-item v-for="fileType in fileTypeList" :key="fileType.code">
          <template #icon><IconFont :type="fileType.icon"/></template>
          {{ fileType.name }}
        </a-menu-item>
      </a-menu>
    </template>
    <template #content>
      <!-- 文件展示区域 -->
      <a-card class="atom-sysfile-content" :style="{ height: `${contentHeight}px` }">
        <!-- 文件路径 -->
        <template #title>
          <a-breadcrumb class="atom-sysfile-breadcrumb">
            <a-breadcrumb-item @click="handleBreadcrumb({ id: -1 })"><IconFont type="SlackOutlined"/>云盘</a-breadcrumb-item>
            <a-breadcrumb-item v-for="(path, index) in pathArray"
                               :key="index"
                               @click="handleBreadcrumb(path)">{{ path.name }}</a-breadcrumb-item>
          </a-breadcrumb>
        </template>
        <!-- 文件操作 -->
        <template #extra>
          <!-- 搜索和文件 -->
          <a-input size="small" class="atom-sysfile-search" placeholder="搜索文件"
                   v-model:value="keyword"
                   @keyup.enter="handleSearch">
            <template #suffix>
              <a-button @click="handleSearch" type="text" shape="circle">
                <template #icon><IconFont type="SearchOutlined" /></template>
              </a-button>
            </template>
          </a-input>
          <!-- 文件上传及文件夹上传 -->
          <a-dropdown :trigger="['click']" class="atom-sysfile-add">
            <a-button type="primary" shape="circle">
              <template #icon><IconFont type="PlusOutlined" /></template>
            </a-button>
            <template #overlay>
              <a-menu @click="handleAdd" class="atom-sysfile-add-menu">
                <a-menu-item v-for="action in addActions" :key="action.name">
                  <template #icon><IconFont :type="action.icon"/></template>{{ action.title }}
                </a-menu-item>
                <!-- 上传按钮 -->
                <a-upload ref="upload"
                          class="atom-sysfile-upload"
                          :headers="headers"
                          :action="uploadAction"
                          :directory="directoryUpload"
                          :showUploadList="false"
                          :multiple="true"
                          v-model:fileList="uploadFileList"
                          @change="handleUploadChange">
                  <a-button>文件上传</a-button>
                </a-upload>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
        <!-- 文件展示 -->
        <ListView v-if="sysFileList && sysFileList.length > 0"
                  :fileList="sysFileList"
                  :totalCnt="pageParams.totalCnt"
                  :hasMore="pageParams.hasMore"></ListView>
        <!-- 无文件时，显示上传提醒 -->
        <a-upload-dragger v-else
                          class="atom-sysfile-empty"
                          :headers="headers"
                          :action="uploadAction"
                          :directory="directoryUpload"
                          :showUploadList="false"
                          :multiple="true"
                          v-model:fileList="uploadFileList"
                          @change="handleUploadChange">
          <h1>将文件拖拽到这里</h1>
          <p>或者</p>
          <div class="atom-sysfile-empty-upload">
            <div class="atom-sysfile-empty-upload-item"
                 v-for="action in addActions"
                 :key="action.name">
              <span>{{ action.title }}</span>
              <IconFont :type="action.icon" />
            </div>
          </div>
        </a-upload-dragger>
      </a-card>
    </template>
  </SideLayout>
  <!-- 文件夹新增弹窗 -->
  <FormDialog v-model="folderModel"
              :visible="folderFormVisible"
              title="新增文件夹"
              :loading="loading"
              :fields="folderFormFields"
              @form-editor-submit="handleFolderSubmit"></FormDialog>
</template>

<script>
/**
 * 文件云盘
 */
import { SideLayout } from '@/layouts'
import FuncTitle from '@/components/Common/FuncTitle'
import { FormDialog } from '@/components/Advance/FuncForm'
import ListView from './ListView'
import config from '@/config/mixins/config'
import files from './mixins/files'
import folder from './mixins/folder'
import upload from './mixins/upload'
export default {
  name: 'SysFile',
  components: { SideLayout, FuncTitle, FormDialog, ListView },
  mixins: [config, files, folder, upload],
  data () {
    return {
      // 文件类型列表
      fileTypeList: [],
      // 选中的文件类型
      selectedTypes: [],
      // 是否展开
      collapsed: null,
      // 搜索关键字
      keyword: '',
      // 文件路径
      pathArray: [],
      // 当前父级目录id
      parentFolder: -1,
      // loading
      loading: false
    }
  },
  computed: {
    // 当前选中的文件类型
    curFileType () {
      return this.selectedTypes && this.selectedTypes[0]
    }
  },
  methods: {
    // 加载文件类型列表
    loadFileType () {
      this.$api.system.type.codeList({ meanId: 100 }).then(typeCodeList => {
        if (this.$utils.isValid(typeCodeList)) {
          this.fileTypeList = typeCodeList.map(typeCode => ({
            code: typeCode.id,
            name: typeCode.typeName,
            icon: typeCode.id === 1 ? 'FolderOutlined' : typeCode.id === 2 ? 'FileImageOutlined' : typeCode.id === 3 ? 'VideoCameraOutlined' : typeCode.id === 4 ? 'AudioOutlined' : typeCode.id === 5 ? 'FileOutlined' : 'FileUnknownOutlined'
          }))
        }
      })
    },
    // 响应收起展开
    handleSideToggle (collapsed) {
      this.collapsed = collapsed
    },
    // 响应文件类型切换
    handleTypeChange ({ key }) {
      if (key === 'all') {
        this.selectedTypes = []
      }
      // 根据文件类型重置分页信息并加载数据
      this.resetPageParams()
      this.loadSysFileList()
    },
    // 响应面包屑点击
    handleBreadcrumb (folder) {
      if (folder.id !== -1) {
        const curIndex = this.pathArray.findIndex(path => path.id === folder.id)
        if (curIndex !== this.pathArray.length - 1) {
          this.pathArray.splice( curIndex + 1)
        } else {
          // 点击最后一个时不重复加载数据
          return
        }
      }
      this.parentFolder = folder.id
      // 重置分页信息并加载数据
      this.resetPageParams()
      this.loadSysFileList()
    },
    // 响应文件查询
    handleSearch () {
      // 重置分页信息并加载数据
      this.resetPageParams()
      this.loadSysFileList()
    },
    // 响应文件或者文件夹新增
    handleAdd ({ key }) {
      if (key === 'folder') {
        // 新增文件夹
        this.folderFormFields = true
        this.folderModel.parentId = this.parentFolder
      } else if (key === 'files') {
        // 上传文件夹
        this.directoryUpload = true
        this.$refs.upload.$refs['uploadRef'].$refs['uploaderRef'].onClick()
        // 上传完成后把这个配置再置为false
        this.directoryUpload = false
      } else if (key === 'file') {
        // 上传文件
        this.$refs.upload.$refs['uploadRef'].$refs['uploaderRef'].onClick()
      }
    }
  },
  created () {
    // 加载文件类型
    this.loadFileType()
    // 加载文件
    this.loadSysFileList()
  }
}
</script>

<style lang="less">
@import "SysFile";
</style>
